<!-- 组件说明 -->
<template>
  <div class="havebottombar wealthIndex">
    <div class="container clearfix">
      <div class="top">
        <img class="topBgPic" src="./../../../assets/imgNews/index/bgpic.png" />
        <div class="leftTop" @click.stop="goto('howtomkmn')">
          <img src="./../../../assets/imgNews/index/ask.png" />
          <!--          <p>Make money</p>-->
        </div>
        <div class="rightTop">
          <div class="liwrap">
            <img src="./../../../assets/imgNews/index/righttop-left.png" />
            <p>
              {{
                userStoreData && userStoreData.integralOne
                  ? userStoreData.integralOne
                  : 0
              }}
            </p>
          </div>
          <div class="liwrap">
            <img src="./../../../assets/imgNews/index/righttop-left-zuan.png" />
            <p>
              {{
                userStoreData && userStoreData.integralTwo
                  ? userStoreData.integralTwo
                  : 0
              }}
            </p>
          </div>
          <div class="liwrap">
            <img src="./../../../assets/imgNews/index/righttop-center.png" />
            <p>
              {{
                Number(
                  userStoreData &&
                    userStoreData.userWaltVo &&
                    userStoreData.userWaltVo.useGainWaltCount
                    ? userStoreData.userWaltVo.useGainWaltCount
                    : 0
                ) +
                  Number(
                    stepNumber?stepNumber:0
                  )
              }}
            </p>
          </div>
          <!--          <div class="liwrap" @click.stop="Beforegoto('exc')">-->
          <!--            <img src="./../../../assets/imgNews/index/righttop-right.png" />-->
          <!--          </div>-->
        </div>
        <div class="righttopentry">
          <div class="liwrap" @click.stop="goto('store')">
            <img src="./../../../assets/imgNews/index/store.png" />
            <span>Store</span>
          </div>
          <div class="liwrap" @click.stop="Beforegoto('exc')">
            <img src="./../../../assets/imgNews/index/righttop-right.png" />
            <span>EXC</span>
          </div>
          <div v-if="false" class="liwrap" @click.stop="goto('knapsack')">
            <img src="./../../../assets/imgNews/index/item.png" />
            <span>Knapsack</span>
          </div>
        </div>

        <div class="stepsShow">
          <p class="title">Today's Steps</p>
          <span>{{ stepNumber ? stepNumber : 0 }}</span>
          <p class="tips">
            Upper limit
            {{
              userStoreData &&
              userStoreData.userWaltVo &&
              userStoreData.userWaltVo.maxWaltCount
                ? userStoreData.userWaltVo.maxWaltCount
                : 0
            }}
          </p>
          <div class="btn" @click.stop="userwaltSynchronizeFn">
            Synchronous Steps
          </div>
          <div ref="compSepWrap" class="compSepWrap">
            <compSep
              :list="objProgress"
              :size="objSize"
              :jindu="objJindu"
            ></compSep>
          </div>
        </div>
      </div>
      <div class="center">
        <div class="title">
          <img src="./../../../assets/imgNews/index/totallist.png" />
          <p>Walk Today</p>
        </div>
        <div class="content">
          <div class="li">
            <p>
              {{walkKilometer}} Km
            </p>
            <div class="li_key">
              <img src="./../../../assets/imgNews/index/totallist-left.png" />
              <p>Mileage</p>
            </div>
          </div>
          <div class="li">
            <p>
              {{
                walkCalories
                  ? (
                      Number(walkCalories) / 7.7
                    ).toFixed(2)
                  : '0.00'
              }}
              g
            </p>
            <div class="li_key">
              <img src="./../../../assets/imgNews/index/totallist-center.png" />
              <p>Fat burning</p>
            </div>
          </div>
          <div class="li">
            <p>
              {{walkCalories}} Kcal
            </p>
            <div class="li_key">
              <img src="./../../../assets/imgNews/index/totallist-right.png" />
              <p>Calories</p>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper">
        <van-swipe :autoplay="3000">
          <van-swipe-item v-for="(item, index) in bannerList" :key="index" @click="jumpTo(item.jumpUrl,item)">
<!--            <img :v-lazy="item.mediaPath" />-->
            <img :src="item.mediaPath">
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
  </div>
</template>

<script>
import compSep from "./compSep";
import { remNumber } from "./../../../utils/remset";
import { mapState } from "vuex";
import { ifLogin, utilGotoLogin } from "@/utils/index.js";
import bannerController from "@/api/banner-controller/banner-controller";

export default {
  components: { compSep },
  data() {
    return {
      img: require("@/assets/imgs/index/defaultPic.png"),
      // objProgress: 15,
      // objJindu: 15,
      currentStep: 0, // 当前步数

      bannerList:[
        // {
        //   jumpUrl:'https://www.baidu.com',
        //   mediaPath:'http://ooo0o.com/0094d201909161547142548.jpg'
        // },
        // {
        //   jumpUrl:'https://www.baidu.com',
        //   mediaPath:'http://ooo0o.com/31c74201905192345174828.jpg'
        // }
      ], //banner数据
    };
  },
  computed: mapState({
    userStoreData: state => state.user,
    stepNumber: state => state.stepNumber,

    objSize() {
      return remNumber(720) * 3.3;
    },

    objProgress() {
      if (
        this.userStoreData &&
        this.userStoreData.userWaltVo &&
        this.userStoreData.userWaltVo.maxWaltCount
      ) {
        return this.currentStep / this.userStoreData.userWaltVo.maxWaltCount;
      } else {
        return 0;
      }
    },
    objJindu() {
      if (
        this.userStoreData &&
        this.userStoreData.userWaltVo &&
        this.userStoreData.userWaltVo.maxWaltCount
      ) {
        return this.currentStep / this.userStoreData.userWaltVo.maxWaltCount;
      } else {
        return 0;
      }
    },

    walkKilometer(){
      if(this.stepNumber){
        return (Number(this.stepNumber)*0.6/1000).toFixed(2)
      }
      return '0.00'
    },
    walkCalories(){
      if(this.stepNumber){
        return (Number(this.stepNumber)*0.6*60*1.036/1000).toFixed(2)
      }
      return '0.00'
    },
  }),
  methods: {
    jumpTo(url,itemData){
      console.log(url);
      console.log(itemData);
      if(url){
        let a = url.slice(0,4);
        if(a=='app:'){
          let b=url.slice(4,url.length);
          this.$router.push({name: b});
          return
        }
        window.StepSDK.jumpUrl(url, "444");//1为app内 非1位app外部浏览器
      }
    },
    Beforegoto(routerName) {
      this.$toast.loading({
        duration: 0,
        forbidClick: true
      });
      this.userwaltSynchronizeFn(routerName);
    },
    // 同步 步数
    userwaltSynchronizeFn(routerName) {
      let zs = this;
      if (!ifLogin()) {
        utilGotoLogin();
      } else {
        this.$toast.loading({
          duration: 0,
          forbidClick: true
        });
        if (zs.currentStep) {
          zs.api.userController
            .userwaltSynchronize({
              userId: zs.userStoreData.userId,
              waltCount: zs.currentStep
            })
            .then(res => {
              zs.$toast.clear();
              if (res.data.code === 200) {
                if (routerName == "exc") {
                  zs.goto(routerName);
                } else {
                  zs.$toast(res.data.info);
                  zs.syncUserInfo("refresh");
                }
              } else {
                zs.$toast(res.data.info);
              }
            });
        } else {
          zs.$toast.clear();
        }
      }
    },

    // 获取banner数据
    getBannerObtainList() {
      if (!ifLogin()) return;
      let zs = this;
      this.$toast.loading({
        duration: 0,
        forbidClick: true
      });
      zs.api.bannerController
          .bannerObtainList({
            userId: zs.userStoreData.userId,
            bannerType:1,
            status:2,
          })
          .then(res => {
            zs.$toast.clear();
            console.log(res);
            if (res.data.code === 200) {
              zs.bannerList=res.data.data;
            } else {
              zs.$toast(res.data.info);
            }
          });
    },
    // 同步用户信息
    syncUserInfo(refresh) {
      if (!ifLogin()) return;
      let zs = this;
      this.$toast.loading({
        duration: 0,
        forbidClick: true
      });
      zs.api.userController
        .userObtainUserinfo({
          userId: zs.userStoreData.userId
        })
        .then(res => {
          zs.$toast.clear();
          console.log(res);
          if (res.data.code === 200) {
            zs.loginsuccess(res.data.data); //登录信息存储
            if (refresh != "refresh") {
              zs.userwaltSynchronizeFn();
            }
          } else {
            zs.$toast(res.data.info);
          }
        });
    },
    // 登陆成功后的数据处理
    loginsuccess(resdata) {
      let zs = this;
      let user = {
        isLogin: true,
        phone: resdata.phone, //用户名 手机号或者字符串
        avatar: resdata.avatar, //用户名 手机号或者字符串
        token: resdata.token?resdata.token:zs.userStoreData.token,
        userId: resdata.userId,
        nickName: resdata.nickName,
        userName: resdata.userName,
        email: resdata.email,
        age: resdata.age,
        sex: resdata.sex,
        createTime: resdata.createTime,
        status: resdata.status,
        integralOne: resdata.integralOne,
        integralTwo: resdata.integralTwo,
        gainWeight: resdata.gainWeight,
        userWaltVo: resdata.userWaltVo
      };
      zs.$store.commit("saveuserdata", user);
    },
    // 路有跳转
    goto(name) {
      if (name == "store" || name == "knapsack" || name == "exc") {
        if (!ifLogin()) {
          utilGotoLogin();
        } else {
          this.$router.push({
            name
          });
        }
      } else {
        this.$router.push({
          name
        });
      }
    },
    fnstop() {
      return false;
    }
  },
  mounted() {
    if (this.currentStep == 0) {
      if (window.StepSDK) {
        StepSDK.getStep();
      }
      setTimeout(() => {
        this.syncUserInfo();
      }, 0);
    } else {
      this.syncUserInfo();
    }

    this.currentStep = this.$store.getters.getStepNumber;
    this.getBannerObtainList();
  },
  watch: {
    stepNumber(newVal, oldVal) {
      // this.currentStep = newVal > 0 ? newVal : oldVal;
      this.currentStep = this.$store.state.stepNumber;
    },
    currentStep(newVal, oldVal) {
      if (newVal > 0 && oldVal == 0 && newVal - this.currentStep > 0) {
        this.userwaltSynchronizeFn();
      }
    }
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang="less" scoped>
@import url("./../../../assets/css/common.less");
@import url("./index.less");
</style>
